import React, { useEffect, useState } from 'react'
import { useStore } from 'react-redux'
import http from '../../api'
import { Space, Table, Button, Tag, notification } from 'antd'
import { useHistory } from 'react-router-dom'

export default function AuditList() {
    const [auditList, setAuditList] = useState([])//草稿列表
    const { UserInfo } = useStore().getState()
    const history = useHistory()

    //编辑打开详情
    const viewDraft = (record) => {
        //嵌套子路由跳转不使用绝对路径
        history.push(`/news-manage/preview/${record.id}`, record)
    }

    // 撤销
    const handelRevert = (item) => {
        http.patch(`/news/${item.id}`, {
            auditState: 0
        }).then(res => {
            getTableList()
            notification.info({
                message: `撤销成功`,
                description: `您可以到【新闻管理/草稿箱】中查看您的新闻`,
                placement: 'topRight'
            })
        })
    }

    // 更新
    const handelUpdate = (item) => {
        history.push('/news-manage/add', item)
    }

    // 发布
    const handelPublish = (item) => {
        http.patch(`/news/${item.id}`, {
            publishState: 2,
            publishTime: Date.now()
        }).then(res => {
            getTableList()
            notification.info({
                message: `发布成功`,
                description: `您可以到【发布管理/已发布】中查看您的新闻`,
                placement: 'topRight'
            })
        })
    }

    // 提交审核 审核通过设置为已通过 待发布 审核不通过设置为未通过 未发布
    const auditEnum = ['未审核', '审核中', '已通过', '未通过']
    const colorList = ['', 'orange', 'green', 'red']
    // const publishList = ['未发布', '待发布', '已上线', '已下线']

    const column = [
        {
            title: '新闻标题',
            key: 'title',
            render: (_, item) => (
                <span style={{ color: "#1890ff" }} onClick={() => viewDraft(item)}>{item.title}</span>
            )
        },
        {
            title: '作者',
            dataIndex: 'author',
            key: 'author',
        },
        {
            title: '新闻分类',
            key: 'categoryName',
        },
        {
            title: '审核状态',
            key: 'auditState',
            render: (_, item) => (
                <Tag color={colorList[item.auditState]}>{auditEnum[item.auditState]}</Tag>
            )
        },
        {
            title: '操作',
            key: 'action',
            render: (_, item) => {
                //审核中的可以撤销 已通过可以发布 未通过可以修改
                if (item.auditState === 1) {
                    return <Button type='primary' ghost onClick={() => {
                        handelRevert(item)
                    }}>撤销</Button>
                } else if (item.auditState === 2) {
                    return <Button type='primary' onClick={() => {
                        handelPublish(item)
                    }}>发布</Button>
                } else {
                    return <Button type='primary' danger onClick={() => {
                        handelUpdate(item)
                    }}>修改</Button>
                }
            }
        }
    ]

    useEffect(() => {
        getTableList()
    }, [])


    //获取新闻列表
    const getTableList = async () => {
        const classRes = await http.get('/categories')
        const newRes = await http.get(`/news?author=${UserInfo.username}`)
        //需要获取新闻分类名称 并且过滤出审核和未发布的新闻
        const newList = newRes.data.map(item => {
            item.categoryName = classRes.data.find(classItem => classItem.id == item.categoryId).title
            return item
        }).filter(item => item.auditState != 0 && (item.publishState < 1 || item.publishState == 1))
        setAuditList(newList)
    }

    return (
        <div>
            <h1>审核列表</h1>
            <Table columns={column} dataSource={auditList} pagination={{ pageSize: 5 }} rowKey={(item) => item.id} />;
        </div>
    )
}
